<!-- 角色编辑弹窗 -->
<template>
  <a-modal
    :width="1060"
    :visible="visible"
    :confirm-loading="loading"
    :title="isUpdate ? '查看产品信息' : '查看产品信息'"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    >
      <template #footer>
          <a-button style="margin-right: 8px" @click="updateVisible(false)">关闭</a-button>
      </template>
      <div>
	<a-typography>
		<a-typography-title :level="3">{{ props.data.name }}</a-typography-title>
	</a-typography>
	<a-typography-paragraph>
	  {{ props.data.description }}
	</a-typography-paragraph>
	<a-typography-paragraph style="font-size:15px;line-height: 1.75;"
		type="secondary" :ellipsis="{ rows: 2 }"
		:content="props.data.content.replace(/(<([^>]+)>)/ig, '')" />
	<a-typography-paragraph>
	  <ul>
		<li><a-typography-link>价格：{{ props.data.price }}</a-typography-link></li>
	  </ul>
	</a-typography-paragraph>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import type { Product } from '@/api/neirong/product/model';


  const emit = defineEmits<{
    (e: 'done'): void;
    (e: 'update:visible', visible: boolean): void;
  }>();

  const props = defineProps<{
    // 弹窗是否打开
    visible: boolean;
    // 修改回显的数据
    data?: Product;
  }>();

  // 是否是修改
  const isUpdate = ref(false);

  // 提交状态
  const loading = ref(false);

  /* 更新visible */
  const updateVisible = (value: boolean) => {
    emit('update:visible', value);
  };

  watch(
    () => props.visible,
    (visible) => {
      if (visible) {
        if (props.data) {
          isUpdate.value = true;
        } else {
          isUpdate.value = false;
        }
      }
    }
  );
</script>
